<template>
	<div id="record">
		<div class="boxes">
			
			<div class="head">
				<div>类型</div>
				<div>维保人员</div>
				<div>开始时间</div>
				<div>结束时间</div>
				<div>操作</div>
			</div>
			<div class="page-example3" @click="handleButton($event)">
				<vue-seamless-scroll :data="listData" :class-option="defaultOption">
					<div class="ul-scoll" v-for="(item, index) in listData" :key="index">
						<div :data-id="item.id" :data-images="item.images">{{ item.typestr }}</div>
						<div :data-id="item.id" :data-images="item.images">{{ item.name }}</div>
						<div :data-id="item.id" :data-images="item.images">{{ item.start }}</div>
						<div :data-id="item.id" :data-images="item.images">{{ item.end }}</div>
						<div :data-id="item.id" :data-images="item.images">现场照片</div>
					</div>
				</vue-seamless-scroll>
			</div>
		</div>
	</div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
// import {getDeptActivity} from "../../../network/api.js";
export default {
	name: 'record',
	props: {
		listData:{
			type:Array
		}
	},
	data() {
		return {
			timer:null,
			// listData: [
			// 	{type: '保养',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养2',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养3',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// ]
		};
	},
	components: {
		vueSeamlessScroll
	},
	// 监听属性 类似于data概念
	computed: {
		defaultOption() {
			return {
				step: 0.2, // 数值越大速度滚动越快
				limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			};
		}
	},
	beforeDestroy() {
		if (this.timer) {
			//如果定时器还在运行 或者直接关闭，不用判断
			clearInterval(this.timer); //关闭
		}
	},
	mounted() {
		// this.getChart();
		// this.timer = setInterval(() => {
		// 	this.getChart()
		// }, 300000); 	
	},
	methods: {
		handleButton(e){
			// console.log(e.target.dataset.id)
			// console.log(e.target.dataset.images)
			// return
			if(e.target.dataset.id){
				console.log('传递图片')
				this.$emit('transferimg', e.target.dataset.images);
			}
		}
		// getChart(){
		// 	getDeptActivity().then(res => {
		// 		if (res.code == '200') {
		// 			// console.log(res.data)
		// 			this.listData = res.data;
		// 		}
		// 	});
		// }
	}
};
</script>

<style scoped lang="scss">
.boxes{
	width: 446px;
	height: 402px;
	padding: 16px 6px 10px 0px;
	color: #ffffff;
	
	.head{
		background-color: #395DBE;
		flex: 1;
		height: 36px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		line-height: 36px;
		font-size: 18px;
		div{
			width: 20%;
		}
	}
	.page-example3{
		width: 440px;
		height: 300px;
		text-align: center;
		overflow: hidden;
		margin: 20px 0;
		.ul-scoll{
			flex: 1;
			height: 36px;
			display: flex;
			justify-content: space-between;
			line-height: 36px;
			div{
				width: 20%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
